<template>
  <div class="main wechat-edit">
    <div class="main-edit">
      <div class="edit-box">
        <h6><span></span>基本信息</h6>
        <div class="box-info">

          <div class="info-item">
            <span class="item-left font-block"><span>*</span>公众号名称</span>
            <span class="item-right">
              <select class="txt-common" v-model="wechat.name">
                <option value="" v-if="wechat.name===''">请选择公众号</option>
                <option v-for="(item, index) in wechat.mps" :value="item" :key="index">{{item}}</option>
              </select>
            </span>
          </div>

          <div class="info-item">
            <span class="item-left font-block"><span>*</span>公众号名称</span>
            <span class="item-right">
              <input type="text" value="" class="txt-common" v-model="wechat.name">
            </span>
          </div>

          <div class="info-item">
            <span class="item-left font-block"><span>*</span>wechat-key</span>
            <span class="item-right">
              <input type="text" value="" class="txt-common" v-model="wechat.key">
            </span>
          </div>
          <div class="clear"></div>
        </div>
      </div>

      <div class="edit-btn-list">
        <button type="button" class="btn-cancel" @click="cancel">取消</button>
        <button type="button" class="btn-submit" @click="submit">保存</button>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '@/config/api'

  export default {
    data(){
      return{
        wechat:{         // 基本信息
          name:'',       //*公众号名称
          key:'',        //*wechat-key
          mps:[],        //*公众号列表
        }
      }
    },
    created(){
      this.init_dict()
    },
    methods:{
      async init_dict() {
        try {
          let mps = await api.getWechatMp()
          this.wechat.mps = mps
        } catch (error) {
          console.log('init_dict error', error)
          this.$message.error('字典数据初始化失败，请刷新重试');
        }
      },
      //信息提交
      submit(){
        let _this=this;

        api.setWechatMp(this.wechat)
          .then(data => {
            _this.$message.success('设置公众号key成功');
            _this.$router.push({path:'/wechat'});
          }).catch(err => {
          console.log('设置公众号key failed.', err);
          _this.$message.error('设置公众号key失败');
        });

      },
      //取消-返回列表
      cancel(){
        this.$router.push({
          path:'/wechat'
        });
      },
    }
  }
</script>

<style scoped>
  @import "../../assets/css/pages/main.css";

  .wechat-edit .main-edit .info-item.item-special .txt-small-x{
    width: 169px;
  }
  .wechat-edit .main-edit .info-item.item-special .txt-small{
    width: 500px;
  }
  .wechat-edit .main-edit .info-item.item-special .btn-del{
    position: relative;
    top: 10px;
  }
</style>

